<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- 引入 Element UI 的 CSS 文件 -->
    <link rel="stylesheet" href="/element-ui/index.css">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.12/lib/theme-chalk/index.css">-->
    <style>
        /* 全局样式 - 确保所有层级高度设置正确 */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #app {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        /* 让 el-container 高度占满整个父元素 */
        .el-container {
            flex: 1;
            min-height: 0;
            /* 修复 flex 容器中的滚动问题 */
        }

        .el-header {
            background-color: #409EFF;
            color: #fff;
            line-height: 60px;
        }

        .el-aside {
            background-color: #324157;
            height: 100%;
            /* 让侧边栏高度占满父容器 */
            overflow-y: auto;
            /* 当内容超出高度时显示滚动条 */
        }

        .el-main {
            background-color: #f0f2f5;
            /* 确保 el-main 可以滚动 */
            overflow-y: auto;
            padding: 0;
        }

        /* 确保菜单容器高度适应侧边栏 */
        .el-aside .el-menu {
            height: 100%;
            border-right: none;
        }

        /* 修复 el-card 在 flex 布局中的高度问题 */
        .el-card {
            height: 100%;
            box-sizing: border-box;
        }

        /* 底部样式 */
        .el-footer {
            background-color: #f0f2f5;
            line-height: 60px;
        }

        /* 设置 iframe 高度和宽度 */
        #contentFrame {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>

<body>
<div id="app">
    <!-- 整体容器 -->
    <el-container>
        <!-- 顶部导航栏 -->
        <el-header>
            <span>后台管理系统</span>
            <el-dropdown style="float: right; margin-right: 20px;">
                    <span class="el-dropdown-link" style="color: white;">
                        管理员 <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <!-- 侧边栏和内容区域 -->
        <el-container>
            <!-- 左侧菜单栏 -->
            <el-aside width="200px">
                <el-menu mode="vertical" :default-active="activeMenu" background-color="#324157"
                         text-color="#bfcbd9" active-text-color="#409EFF">
                    <el-submenu v-for="item in menuList" :key="item.index" :index="item.index">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span>{{ item.title }}</span>
                        </template>
                        <el-menu-item
                                v-for="subItem in item.children"
                                :key="subItem.index"
                                :index="subItem.index"
                                @click="handleMenuItemClick(subItem.index)"
                        >
                            <i :class="subItem.icon"></i>
                            <span>{{ subItem.title }}</span>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <!-- 主要内容区域 -->
            <el-main>
                <!-- 使用 iframe 展示右侧页面内容 -->
                <iframe id="contentFrame" src=""></iframe>
            </el-main>
        </el-container>
        <!-- 底部信息 -->
        <el-footer style="text-align: center; font-size: 12px;">
            © 2025 后台管理系统 版权所有
        </el-footer>
    </el-container>
</div>
<!-- 引入 Vue 和 Element UI 的 JS 文件 -->
<script src="/element-ui/Vue.js"></script>
<script src="/element-ui/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                activeMenu: '1-1',
                // 模拟从后端获取的菜单 JSON 数据
                menuList: [
                    {
                        index: '1',
                        title: '系统管理',
                        icon: 'el-icon-setting',
                        children: [
                            {
                                index: '/admin/user.html',
                                title: '用户管理',
                                icon: 'el-icon-user',
                            },
                            {
                                index: '/admin/SQLite.html',
                                title: 'SQLite',
                                icon: 'el-icon-lock'
                            }
                        ]
                    },
                    {
                        index: '2',
                        title: '代码生成',
                        icon: 'el-icon-setting',
                        children: [
                            {
                                index: '/gencode/gencode.html',
                                title: '代码生成器',
                                icon: 'el-icon-user',
                            }
                        ]
                    },
                    {
                        index: '2',
                        title: '日志管理',
                        icon: 'el-icon-document',
                        children: [
                            {
                                index: '2-1',
                                title: '登录日志',
                                icon: 'el-icon-time'
                            }
                        ]
                    },
                    // 新增菜单组
                    {
                        index: '3',
                        title: '数据库查询',
                        icon: 'el-icon-database',
                        children: [
                            {
                                index: '/database/allColComments.html',
                                title: 'ALL_COL_COMMENTS',
                                icon: 'el-icon-search'
                            },
                            // 新增菜单项
                            {
                                index: '/database/allUsers.html',
                                title: 'ALL_USERS',
                                icon: 'el-icon-user'
                            },
                            {
                                index: '/database/allObjects.html',
                                title: 'ALL_OBJECTS',
                                icon: 'el-icon-folder'
                            },
                            {
                                index: '/database/allDefAuditOpts.html',
                                title: 'ALL_DEF_AUDIT_OPTS',
                                icon: 'el-icon-check'
                            },
                            {
                                index: '/database/allTables.html',
                                title: 'ALL_TABLES',
                                icon: 'el-icon-document'
                            },
                            {
                                index: '/database/allIndexes.html',
                                title: 'ALL_INDEXES',
                                icon: 'el-icon-menu'
                            },
                            {
                                index: '/database/allTabComments.html',
                                title: 'ALL_TAB_COMMENTS',
                                icon: 'el-icon-document-copy'
                            },
                            {
                                index: '/database/allTabColumns.html',
                                title: 'ALL_TAB_COLUMNS',
                                icon: 'el-icon-collection'
                            }
                        ]
                    }
                ]
            };
        },
        methods: {
            // 定义点击菜单项的处理函数
            handleMenuItemClick(path) {
                // 修改 iframe 的 src 属性来加载对应页面
                document.getElementById('contentFrame').src = path;
            }
        }
    });
</script>
</body>

</html>